<template>
  <view class="home-container" :class="containerClasses">
    <!-- 老年人模式切换按钮 -->
    <view class="elderly-mode-toggle" @click="toggleElderlyMode">
      <view class="toggle-icon">
        <text class="icon-text">{{ isElderlyMode ? 'A' : '大' }}</text>
      </view>
      <text class="toggle-text">{{ isElderlyMode ? '标准版' : '大字版' }}</text>
    </view>

    <!-- 轮播图区域 -->
    <view class="banner-section" v-if="!isElderlyMode">
      <!-- 加载中状态 -->
      <view v-if="bannerLoading" class="banner-loading">
        <view class="loading-spinner"></view>
        <text class="loading-text">轮播图加载中...</text>
      </view>
      
      <!-- 轮播图内容 -->
      <swiper 
        v-else-if="bannerList.length > 0"
        class="banner-swiper"
        :indicator-dots="true"
        :autoplay="true"
        :interval="3000"
        :duration="1000"
        :circular="true"
        indicator-color="rgba(255,255,255,0.5)"
        indicator-active-color="#ffffff"
      >
        <swiper-item 
          v-for="(banner, index) in bannerList" 
          :key="banner.id || index"
          @click="navigateToBanner(banner)"
        >
          <view class="banner-item">
            <!-- 背景图片 -->
            <image 
              :src="banner.backgroundImage" 
              class="banner-bg-image" 
              mode="aspectFill"
              :lazy-load="true"
              @error="onBannerImageError"
            />
            <!-- 轮播图信息覆盖层 -->
            <view v-if="banner.title || banner.description" class="banner-overlay">
              <text v-if="banner.title" class="banner-title">{{ banner.title }}</text>
              <text v-if="banner.description" class="banner-desc">{{ banner.description }}</text>
            </view>
          </view>
        </swiper-item>
      </swiper>
      
      <!-- 无轮播图时的占位 -->
      <view v-else class="banner-placeholder">
        <text class="placeholder-text">暂无轮播图</text>
      </view>
    </view>

    <!-- 功能图标区域 -->
    <view class="function-icons">
      <view class="icons-grid" :class="{ 'elderly-grid': isElderlyMode }">
        <view 
          class="icon-item" 
          :class="{ 'elderly-icon': isElderlyMode }"
          v-for="(action, index) in displayFunctions" 
          :key="index"
          @click="navigateToAction(action)"
        >
          <view class="icon-wrapper" :class="{ 'elderly-icon-wrapper': isElderlyMode }">
            <image 
              :src="action.iconImage" 
              class="icon-image" 
              mode="aspectFill"
            />
          </view>
          <text class="icon-label" :class="{ 'elderly-label': isElderlyMode }">{{ action.label }}</text>
        </view>
      </view>
    </view>

    <!-- 我的业务 - 老年人模式下隐藏 -->
    <view class="my-business" v-if="!isElderlyMode">
      <view class="business-header">
        <text class="business-title">我办理的业务</text>
        <view class="business-more" @click="navigateToMyServices">
          <text class="more-text">点击查看</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>

    <!-- 业务推广卡片 - 老年人模式下隐藏 -->
    <view class="promotion-card" v-if="!isElderlyMode" @click="navigateToPromotion">
      <image class="card-image" src="/static/images/zha.png" mode="aspectFit" />
    </view>

    <!-- 个人健康分析 - 老年人模式下隐藏 -->
    <view class="health-analysis-card" v-if="!isElderlyMode" @click="navigateToHealth">
      <image class="health-image" src="/static/images/jian.png" mode="aspectFit" />
    </view>

    <!-- 常用服务 -->
    <view class="common-services" v-if="!isElderlyMode">
      <text class="services-title" :class="{ 'elderly-title': isElderlyMode }">常用服务</text>
      <view class="services-grid" :class="{ 'elderly-services-grid': isElderlyMode }">
        <view 
          class="service-item" 
          :class="{ 'elderly-service-item': isElderlyMode }"
          v-for="(service, index) in displayServices" 
          :key="index"
          @click="navigateToService(service)"
        >
          <view class="service-icon" :style="{ backgroundColor: service.bgColor }" :class="{ 'elderly-service-icon': isElderlyMode }">
            <image 
              v-if="service.iconImage"
              :src="service.iconImage" 
              class="service-icon-image" 
              mode="aspectFill"
            />
            <text v-else class="iconfont" :class="service.icon"></text>
            </view>
          <text class="service-label" :class="{ 'elderly-service-label': isElderlyMode }">{{ service.label }}</text>
        </view>
      </view>
    </view>

    <!-- 老年人模式简化服务 -->
    <view class="elderly-services" v-if="isElderlyMode">
      <text class="elderly-services-title">常用功能</text>
      <view class="elderly-services-list">
        <view 
          class="elderly-service-card" 
          v-for="(service, index) in elderlyServices" 
          :key="index"
          @click="navigateToService(service)"
        >
          <view class="elderly-service-icon-large" :style="{ backgroundColor: service.bgColor }">
            <image 
              v-if="service.iconImage"
              :src="service.iconImage" 
              class="elderly-service-icon-image" 
              mode="aspectFill"
            />
            <text v-else class="iconfont" :class="service.icon"></text>
          </view>
          <text class="elderly-service-title">{{ service.label }}</text>
          <text class="elderly-service-desc">{{ service.description }}</text>
        </view>
      </view>
    </view>

    <!-- 位置状态指示器 -->
    <view class="location-indicator" v-if="locationStatus.enabled">
      <view class="location-icon" :class="'location-' + locationStatus.status">
        <text class="iconfont icon-location"></text>
      </view>
      <text class="location-text">{{ locationStatus.text }}</text>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { getBannerList, handleBannerClick, transformBannerData, preloadBannerImages, DEFAULT_BANNERS } from '../../services/bannerService.js'

export default {
  name: 'HomePage',
  data() {
    return {
      currentTime: '',
      greetingTime: '',
      // 快捷操作默认数组，避免未定义导致真机 forEach 报错
      quickActions: [],
      // 轮播图数据
      bannerList: [],
      bannerLoading: true,
      // 主要功能图标
      mainFunctions: [
        {
          label: '参保信息',
          icon: 'icon-user',
          iconImage: '/static/images/1.svg',
          bgColor: '#faad14',
          path: '/pages/insurance/index'
        },
        {
          label: '缴费信息',
          icon: 'icon-pay-circle',
          iconImage: '/static/images/2.svg',
          bgColor: '#faad14',
          path: '/pages/payment/index'
        },
        {
          label: '消费信息',
          icon: 'icon-shopping-cart',
          iconImage: '/static/images/3.svg',
          bgColor: '#faad14',
          path: '/pages/consumption/index'
        },
        {
          label: '证明材料',
          icon: 'icon-file-text',
          iconImage: '/static/images/4.svg',
          bgColor: '#faad14',
          path: '/pages/documents/index'
        },
      ],
      // 常用服务
      commonServices: [
        {
          label: '药品比价查询',
          icon: 'icon-medicine',
          iconImage: '/static/images/6.png',
          bgColor: '#40a9ff',
          path: '/pages/drugs/price-compare'
        },
        {
          label: '个人税收记录',
          icon: 'icon-calculator',
          iconImage: '/static/images/7.png',
          bgColor: '#fa8c16',
          path: '/pages/tax/records'
        },
        {
          label: '医疗账户返还',
          icon: 'icon-heart',
          iconImage: '/static/images/8.png',
          bgColor: '#52c41a',
          path: '/pages/medical/refund'
        },
        {
          label: '药品来源查询',
          icon: 'icon-search',
          iconImage: '/static/images/9.png',
          bgColor: '#fa541c',
          path: '/pages/drugs/source'
        },
        {
          label: '社保来源查询',
          icon: 'icon-bank',
          iconImage: '/static/images/10.png',
          bgColor: '#722ed1',
          path: '/pages/social/source'
        },
        {
          label: '医保定点医院查询',
          icon: 'icon-hospital',
          iconImage: '/static/images/11.png',
          bgColor: '#13c2c2',
          path: '/pages/hospital/designated'
        }
      ],
      healthNews: [
        {
          id: '1',
          title: '冬季流感预防指南',
          summary: '了解流感症状，掌握预防方法，保护自己和家人健康',
          image: '/static/logo.png',
          publishTime: '2024-01-15 09:00:00',
          views: 1245
        },
        {
          id: '2',
          title: '合理用药小贴士',
          summary: '正确服药时间，避免药物相互作用，提高治疗效果',
          image: '/static/logo.png',
          publishTime: '2024-01-14 15:30:00',
          views: 896
        }
      ]
    }
  },
  computed: {
    ...mapState('auth', ['userInfo', 'isLoggedIn']),
    ...mapState('appointment', ['todayAppointment']),
    ...mapState('alerts', ['latestAlert', 'unreadAlertsCount']),
    ...mapState('location', ['locationStatus']),
    ...mapState('app', ['isElderlyMode', 'fontSize', 'theme']),

    // 容器样式类
    containerClasses() {
      return {
        'elderly-mode': this.isElderlyMode,
        'font-large': this.fontSize === 'large',
        'font-extra-large': this.fontSize === 'extra-large',
        'theme-elderly': this.theme === 'elderly'
      }
    },
    
    // 显示的主要功能（老年人模式下只显示前4个）
    displayFunctions() {
      if (this.isElderlyMode) {
        return this.mainFunctions.slice(0, 4)
      }
      return this.mainFunctions
    },
    
    // 显示的服务
    displayServices() {
      if (this.isElderlyMode) {
        return this.commonServices.slice(0, 4)
      }
      return this.commonServices
    },
    
    // 老年人模式专用服务
    elderlyServices() {
      return [
        {
          label: '医疗挂号',
          description: '快速预约挂号',
          icon: 'icon-hospital',
          iconImage: '/static/images/8.png',
          bgColor: '#52c41a',
          path: '/pages/appointment/index'
        },
        {
          label: '药品查询',
          description: '查看药品信息',
          icon: 'icon-medicine',
          iconImage: '/static/images/6.png',
          bgColor: '#1890ff',
          path: '/pages/drugs/index'
        },
        {
          label: '健康档案',
          description: '查看健康记录',
          icon: 'icon-heart',
          iconImage: '/static/images/12.png',
          bgColor: '#fa8c16',
          path: '/pages/health/index'
        },
        {
          label: '客服帮助',
          description: '在线客服咨询',
          icon: 'icon-customer-service',
          iconImage: '/static/images/11.png',
          bgColor: '#722ed1',
          path: '/pages/help/index'
        }
      ]
    }
  },
  onLoad() {
    this.initPage()
  },
  onShow() {
    this.refreshData()
  },
  onPullDownRefresh() {
    this.refreshData().finally(() => {
      uni.stopPullDownRefresh()
    })
  },
  methods: {
    ...mapActions('auth', ['checkLoginStatus']),
    ...mapActions('appointment', ['getTodayAppointment']),
    ...mapActions('alerts', ['getLatestAlert', 'dismissAlert']),
    ...mapActions('location', ['updateLocationStatus']),
    ...mapActions('app', ['initAppSettings', 'toggleElderlyMode']),

    // 初始化页面
    async initPage() {
      this.updateTime()
      this.setGreeting()
      
      // 初始化应用设置
      await this.initAppSettings()
      
      // 加载轮播图数据
      await this.loadBannerList()
      
      // 检查登录状态
      if (this.isLoggedIn) {
        await this.loadUserData()
      }
      
      // 启动定时器
      this.startTimers()
    },

    // 刷新数据
    async refreshData() {
      try {
        uni.showLoading({ title: '刷新中...' })
        
        if (this.isLoggedIn) {
          // 并发加载数据，但独立处理错误，避免某个数据源失败影响其他
          const promises = [
            this.getTodayAppointment().catch(error => {
              console.warn('获取预约信息失败:', error)
              return null
            }),
            this.getLatestAlert().catch(error => {
              console.warn('获取告警信息失败:', error)
              return null
            }),
            this.updateLocationStatus().catch(error => {
              console.warn('更新位置状态失败:', error)
              return null
            })
          ]
          
          await Promise.allSettled(promises)
        }
        
        // 更新快捷操作的徽章
        this.updateActionBadges()
        
      } catch (error) {
        console.error('刷新数据失败:', error)
        uni.showToast({
          title: '部分数据刷新失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 加载用户数据
    async loadUserData() {
      // 并发加载用户数据，独立处理每个数据源的错误
      const promises = [
        this.getTodayAppointment().catch(error => {
          console.warn('获取预约信息失败:', error)
          return null
        }),
        this.getLatestAlert().catch(error => {
          console.warn('获取告警信息失败:', error)
          return null
        }),
        this.updateLocationStatus().catch(error => {
          console.warn('更新位置状态失败:', error)
          return null
        })
      ]
      
      try {
        await Promise.allSettled(promises)
      } catch (error) {
        console.error('加载用户数据异常:', error)
      }
    },

    // 更新时间
    updateTime() {
      const now = new Date()
      this.currentTime = now.toLocaleTimeString('zh-CN', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit'
      })
    },

    // 设置问候语
    setGreeting() {
      const hour = new Date().getHours()
      if (hour < 6) {
        this.greetingTime = '凌晨好'
      } else if (hour < 9) {
        this.greetingTime = '早上好'
      } else if (hour < 12) {
        this.greetingTime = '上午好'
      } else if (hour < 14) {
        this.greetingTime = '中午好'
      } else if (hour < 17) {
        this.greetingTime = '下午好'
      } else if (hour < 19) {
        this.greetingTime = '傍晚好'
      } else {
        this.greetingTime = '晚上好'
      }
    },

    // 启动定时器
    startTimers() {
      // 每分钟更新时间
      setInterval(this.updateTime, 60000)
    },

    // 更新快捷操作徽章
    updateActionBadges() {
      if (!Array.isArray(this.quickActions)) return
      this.quickActions.forEach(action => {
        if (action && action.label === '告警中心') {
          action.badge = this.unreadAlertsCount > 0 ? this.unreadAlertsCount.toString() : ''
        }
      })
    },

    // 导航到功能页面
    navigateToAction(action) {
      if (!this.isLoggedIn && action.path !== '/pages/login/index') {
        this.navigateToLogin()
        return
      }
      
      uni.navigateTo({
        url: action.path
      })
    },

    // 导航到个人中心
    navigateToProfile() {
      if (!this.isLoggedIn) {
        this.navigateToLogin()
        return
      }
      
      uni.switchTab({
        url: '/pages/profile/index'
      })
    },

    // 导航到登录页
    navigateToLogin() {
      uni.navigateTo({
        url: '/pages/login/index'
      })
    },

    // 导航到预约详情
    navigateToAppointment() {
      uni.switchTab({
        url: '/pages/appointment/index'
      })
    },

    // 处理告警点击
    handleAlertClick() {
      uni.navigateTo({
        url: `/pages/alerts/detail?id=${this.latestAlert.id}`
      })
    },

    // 关闭告警
    async dismissAlert() {
      try {
        await this.dismissAlert(this.latestAlert.id)
      } catch (error) {
        console.error('关闭告警失败:', error)
      }
    },

    // 导航到资讯列表
    navigateToNews() {
      uni.navigateTo({
        url: '/pages/news/index'
      })
    },

    // 导航到资讯详情
    navigateToNewsDetail(news) {
      uni.navigateTo({
        url: `/pages/news/detail?id=${news.id}`
      })
    },

    // 导航到我的服务
    navigateToMyServices() {
      uni.navigateTo({
        url: '/pages/my-services/index'
      })
    },

    // 导航到推广页面
    navigateToPromotion() {
      uni.navigateTo({
        url: '/pages/promotion/fraud-prevention'
      })
    },

    // 导航到服务页面
    navigateToService(service) {
      if (service.path) {
        uni.navigateTo({
          url: service.path
        })
      }
    },

    // 轮播图点击事件
    navigateToBanner(banner) {
      // 使用轮播图服务处理点击
      handleBannerClick(banner)
    },

    // 加载轮播图数据
    async loadBannerList() {
      try {
        this.bannerLoading = true
        console.log('[HomePage] 开始加载轮播图...')
        
        // 优先尝试从API获取轮播图（服务器已修复CORS）
        try {
          const response = await getBannerList({ active: true })
          
          if (response && response.success && response.data) {
            // 转换数据格式
            this.bannerList = transformBannerData(response.data)
            console.log('[HomePage] 轮播图API加载成功:', this.bannerList.length, '个')
            
            // 预加载图片
            preloadBannerImages(this.bannerList)
          } else {
            console.warn('[HomePage] 轮播图API返回格式异常，使用默认数据')
            this.bannerList = DEFAULT_BANNERS
          }
        } catch (apiError) {
          console.warn('[HomePage] 轮播图API加载失败，使用本地数据:', apiError.message)
          // 使用本地轮播图数据作为fallback
          this.bannerList = DEFAULT_BANNERS
        }
        
      } catch (error) {
        console.error('[HomePage] 轮播图初始化失败:', error)
        // 确保有默认数据
        this.bannerList = DEFAULT_BANNERS
      } finally {
        this.bannerLoading = false
      }
    },

    // 格式化时间
    formatTime(timeStr) {
      // 兼容 iOS 的日期解析：统一转为 "yyyy/MM/dd HH:mm:ss"
      let safeStr = timeStr
      if (typeof safeStr === 'string' && safeStr.includes('-')) {
        // 替换为斜杠分隔，并保证有空格分隔时间
        safeStr = safeStr.replace(/-/g, '/').replace('T', ' ')
      }
      const time = new Date(safeStr)
      const now = new Date()
      const diff = now - time
      
      if (diff < 60000) { // 1分钟内
        return '刚刚'
      } else if (diff < 3600000) { // 1小时内
        return `${Math.floor(diff / 60000)}分钟前`
      } else if (diff < 86400000) { // 1天内
        return `${Math.floor(diff / 3600000)}小时前`
      } else {
        return time.toLocaleDateString('zh-CN')
      }
    },

    // 轮播图图片加载错误处理
    onBannerImageError(event) {
      console.warn('[HomePage] 轮播图图片加载失败:', event)
      // 可以设置默认图片，但小程序中需要通过其他方式处理
    }
  }
}
</script>

<style lang="scss" scoped>
// 引入蓝白主题变量
@import '@/uni.scss';

// 基础变量
$primary: #2a7de1;
$secondary: #4caf50;
$accent: #ff6b6b;
$light-bg: #f8f9fc;
$card-bg: #ffffff;
$text-primary: #2c3e50;
$text-secondary: #7f8c8d;
$border-radius: 24rpx;
$shadow-sm: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
$shadow-md: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
$transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

// 整体容器
.home-container {
  min-height: 100vh;
  background: $light-bg;
  padding: 0 24rpx 120rpx;
  position: relative;
  
  // 老年人模式
  &.elderly-mode {
    background: #f5f7fa;
    font-size: 32rpx;
    
    &.font-large { font-size: 36rpx; }
    &.font-extra-large { font-size: 40rpx; }
    &.theme-elderly { background: #f0f4f8; }
  }
}

// 老年人模式切换按钮 - 现代化设计
.elderly-mode-toggle {
  position: fixed;
  top: 40rpx;
  right: 24rpx;
  background: linear-gradient(135deg, $primary 0%, #1a6bc5 100%);
  color: white;
  padding: 12rpx 24rpx;
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  z-index: 1000;
  box-shadow: $shadow-md;
  transition: $transition;
  border: none;
  
  &:active {
    transform: scale(0.95);
    opacity: 0.9;
  }
  
  .toggle-icon {
    width: 44rpx;
    height: 44rpx;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12rpx;
    
    .icon-text {
      font-size: 26rpx;
      font-weight: bold;
      color: white;
    }
  }
  
  .toggle-text {
    font-weight: 500;
  }
}

// 轮播图 - 现代化卡片设计
.banner-section {
  height: 320rpx;
  border-radius: $border-radius;
  overflow: hidden;
  margin-top: 20rpx;
  box-shadow: $shadow-sm;
  position: relative;
  
  .elderly-mode & {
    display: none;
  }
}

// 轮播图加载状态
.banner-loading {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  
  .loading-spinner {
    width: 60rpx;
    height: 60rpx;
    border: 4rpx solid #e0e7ff;
    border-top: 4rpx solid #4f46e5;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20rpx;
  }
  
  .loading-text {
    color: #6b7280;
    font-size: 28rpx;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 轮播图占位
.banner-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  
  .placeholder-text {
    color: #9ca3af;
    font-size: 28rpx;
  }
}

.banner-swiper {
  height: 100%;
  border-radius: $border-radius;
}

.banner-item {
  height: 100%;
  position: relative;
}

// 轮播图信息覆盖层
.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 40rpx 32rpx 24rpx;
  
  .banner-title {
    display: block;
    color: white;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 8rpx;
    line-height: 1.3;
  }
  
  .banner-desc {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 26rpx;
    line-height: 1.4;
  }
}

.banner-bg-image {
  width: 100%;
  height: 100%;
  border-radius: $border-radius;
}

// 功能图标区域 - 网格布局
.function-icons {
  margin: 32rpx 0;
}

.icons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  
  &.elderly-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;
  }
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: $transition;
  
  &:active {
    transform: scale(0.95);
  }
  
  &.elderly-icon {
    padding: 0;
  }
}

.icon-wrapper {
  width: 100rpx;
  height: 100rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, $primary 0%, #3a8de8 100%);
  box-shadow: $shadow-sm;
  margin-bottom: 16rpx;
  
  &.elderly-icon-wrapper {
    width: 120rpx;
    height: 120rpx;
    border-radius: 30rpx;
  }
  
  .icon-image {
    width: 50rpx;
    height: 50rpx;
  }
}

.icon-label {
  font-size: 26rpx;
  color: $text-primary;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  
  &.elderly-label {
    font-size: 30rpx;
    font-weight: 500;
  }
}

// 我的业务 - 卡片设计
.my-business {
  background: $card-bg;
  border-radius: $border-radius;
  padding: 24rpx;
  margin: 24rpx 0;
  box-shadow: $shadow-sm;
  
  .elderly-mode & {
    display: none;
  }
}

.business-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.business-title {
  font-size: 32rpx;
  font-weight: 600;
  color: $text-primary;
}

.business-more {
  display: flex;
  align-items: center;
  color: $primary;
  font-size: 26rpx;
  font-weight: 500;
  
  .iconfont {
    margin-left: 6rpx;
    font-size: 24rpx;
  }
}

// 推广卡片 - 现代化设计
.promotion-card {
  height: 180rpx;
  border-radius: $border-radius;
  overflow: hidden;
  margin: 24rpx 0;
  box-shadow: $shadow-sm;
  
  .elderly-mode & {
    display: none;
  }
  
  .card-image {
    width: 100%;
    height: 100%;
  }
}

// 健康分析卡片
.health-analysis-card {
  height: 240rpx;
  border-radius: $border-radius;
  overflow: hidden;
  margin: 24rpx 0;
  box-shadow: $shadow-sm;
  
  .elderly-mode & {
    display: none;
  }
  
  .health-image {
    width: 100%;
    height: 100%;
  }
}

// 常用服务 - 网格布局
.common-services {
  margin: 40rpx 0 24rpx;
  
  .elderly-mode & {
    display: none;
  }
}

.services-title {
  font-size: 32rpx;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: 24rpx;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 12rpx;
  background: $card-bg;
  border-radius: $border-radius;
  box-shadow: $shadow-sm;
  transition: $transition;
  
  &:active {
    transform: scale(0.95);
  }
}

.service-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  background: linear-gradient(135deg, $secondary 0%, #5cb860 100%);
  
  .service-icon-image {
    width: 40rpx;
    height: 40rpx;
  }
}

.service-label {
  font-size: 26rpx;
  color: $text-primary;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}

// 老年人模式专用服务
.elderly-services {
  margin-top: 32rpx;
}

.elderly-services-title {
  font-size: 36rpx;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: 24rpx;
  text-align: center;
}

.elderly-services-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.elderly-service-card {
  background: $card-bg;
  border-radius: $border-radius;
  padding: 32rpx 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: $shadow-sm;
  transition: $transition;
  border: 1rpx solid #eef2f7;
  
  &:active {
    transform: scale(0.98);
  }
}

.elderly-service-icon-large {
  width: 100rpx;
  height: 100rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  background: linear-gradient(135deg, $primary 0%, #3a8de8 100%);
  
  .elderly-service-icon-image {
    width: 50rpx;
    height: 50rpx;
  }
}

.elderly-service-title {
  font-size: 32rpx;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: 8rpx;
  text-align: center;
}

.elderly-service-desc {
  font-size: 26rpx;
  color: $text-secondary;
  text-align: center;
}

// 位置指示器 - 现代化设计
.location-indicator {
  position: fixed;
  bottom: 160rpx;
  right: 24rpx;
  background: rgba($text-primary, 0.85);
  color: white;
  padding: 16rpx 28rpx;
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  z-index: 1000;
  box-shadow: $shadow-md;
  backdrop-filter: blur(10rpx);
  
  .location-icon {
    margin-right: 12rpx;
    
    &.location-locating {
      animation: pulse 1.5s infinite;
    }
    
    .iconfont {
      font-size: 28rpx;
    }
  }
}

// 动画
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

// 响应式适配
@media (max-width: 600rpx) {
  .icons-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .elderly-services-list {
    grid-template-columns: 1fr;
  }
}
</style>